<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>jQuery UI Sortable - Drop placeholder</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    <link rel="stylesheet" href="css/index.css"/>

    <style>
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }

        #sortable li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            height: 1.5em;
        }

        html>body #sortable li {
            height: 1.5em;
            line-height: 1.2em;
        }

        .ui-state-highlight {
            height: 1.5em;
            line-height: 1.2em;
        }
    </style>
    <script>
        $(function () {
//            $("#sortable").sortable({
//                placeholder: "ui-state-highlight"
//            });
//            $("#sortable").disableSelection();

            $(".column").sortable({
                placeholder: "ui-state-highlight",
                connectWith: ".column"
            });
//            $("#table").disableSelection();
        });
    </script>
</head>
<body>

<!--<ul id="sortable">-->
    <!--<li class="ui-state-default">Item 1</li>-->
    <!--<li class="ui-state-default">Item 2</li>-->
    <!--<li class="ui-state-default">Item 3</li>-->
    <!--<li class="ui-state-default">Item 4</li>-->
    <!--<li class="ui-state-default">Item 5</li>-->
    <!--<li class="ui-state-default">Item 6</li>-->
    <!--<li class="ui-state-default">Item 7</li>-->
<!--</ul>-->

<table id="table" class="tablesorter" border="0" cellpadding="0" cellspacing="1">
    <thead>
        <tr class="column11">
            <th class="column">column#1</th>
            <th class="column">column#2</th>
            <th class="column">column#3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
        </tr>
    </tbody>
</table>


</body>
</html>